import React from 'react'
import { SchemaForm, Item, Submit, Reset, Layout, SchemaType } from '@amazebird/antd-schema-form'

const options = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 },
  { label: '选项4', value: 4 },
  { label: '选项5', value: 5 },
  { label: '选项6', value: 6 },
  { label: '选项7', value: 7 }
]

const schema: SchemaType = {
  inputRequired: {
    label: '字符串必填',
    component: 'Input',
    required: true
  },
  selectRequired: {
    label: '选择器必填',
    component: 'Select',
    options: [{ label: '选项1', value: 1 }, { label: '选项2', value: 2 }],
    required: true
  },
  string: {
    type: 'object',
    label: '字符串验证',
    fields: {
      len: {
        label: '固定长度',
        type: 'string',
        component: 'Input',
        len: 5
      },
      max: {
        label: '晨大长度',
        type: 'string',
        component: 'Input',
        max: 5
      },
      min: {
        label: '最小长度',
        type: 'string',
        component: 'Input',
        min: 5
      },
      range: {
        label: '长度范围',
        type: 'string',
        component: 'Input',
        range: [5, 10]
      }
    }
  },
  number: {
    type: 'object',
    label: '数值验证',
    fields: {
      len: {
        label: '固定值',
        type: 'number',
        component: 'InputNumber',
        len: 5
      },
      max: {
        label: '晨大值',
        type: 'number',
        component: 'InputNumber',
        max: 5
      },
      min: {
        label: '最小值',
        type: 'number',
        component: 'InputNumber',
        min: 5
      },
      range: {
        label: '数值范围',
        type: 'number',
        component: 'InputNumber',
        range: [5, 10]
      }
    }
  },
  array: {
    type: 'object',
    label: '数组验证',
    fields: {
      len: {
        label: '固定个数',
        type: 'array',
        component: 'Select',
        options,
        props: { mode: 'multiple' },
        len: 3
      },
      max: {
        label: '晨大值',
        type: 'array',
        component: 'InputNumber',
        max: 5
      },
      min: {
        label: '最小值',
        type: 'array',
        component: 'InputNumber',
        min: 5
      },
      range: {
        label: '数值范围',
        type: 'array',
        component: 'InputNumber',
        range: [5, 10]
      }
    }
  }
}

function RuleDemo() {
  function onFinish(data) {
    console.info('提交成功', data)
  }

  function onError(data) {
    console.error('发生错误', data)
  }

  return (
    <SchemaForm schema={schema}>
      {/* <Item field="inputRequired" />
      <Item field="selectRequired" />
      <Item field="string" >
        <Item field="len" />
        <Item field="max" />
        <Item field="min" />
        <Item field="range" />
      </Item> */}
      <Item field="number" >
        <Item field="len" />
        <Item field="max" />
        <Item field="min" />
        <Item field="range" />
      </Item>
      <Item field="array" >
        <Item field="len" />
        {/* <Item field="max" />
        <Item field="min" />
        <Item field="range" /> */}
      </Item>
      <Layout align="left" offset={8}>
        <Submit onFinish={onFinish} onError={onError} />
        <Reset />
      </Layout>
    </SchemaForm>
  )
}

export default RuleDemo
